{extend name='base'/}

{block name='title'}会员登录{/block}

{block name='main'}
<style>
    .login-form{
        box-shadow: 0 6px 20px 0 rgba(37,43,50,.07);
        border-radius: 16px;
        margin: 3rem auto;
        padding: 2rem;
        min-width: 60%;
    }
</style>
<div class="row m-0">
    <form class="login-form">
        <div class="form-group">
            <label for="username">账号</label>
            <input type="email" name="data[username]" class="form-control" id="username" required placeholder="请输入用户名/手机号">
            <!--<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" name="data[password]" class="form-control" id="password" required placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="captcha">验证码</label>
            <div class="row m-0">
                <input type="text" name="data[captcha]" class="form-control media-body" required id="captcha">
                <img src="{:url('User/captcha')}" onclick="refresh(this)" style="cursor: pointer;">
            </div>
        </div>
        <button type="button" class="btn btn-primary login-btn">立即登录</button>
        <a href="{:url('User/register')}" class="btn btn-link ml-lg-3">没有账号？立即注册</a>
    </form>
</div>
{/block}

{block name='js'}
<script>
function refresh(obj) {
    $(obj).attr('src', "{:url('User/captcha')}?rand="+Math.random())
}
$(function () {
    let lock  = false;
   $(".login-btn").on('click', function () {
       if (lock) {
           return;
       }
       lock = true;
       $.post("{:url('User/login')}", $('.login-form').serialize(), function (res) {
           console.log(res)
           if (res.code == 0) {
               refresh($('#captcha').next().eq(0));
               swal("提示", res.msg, {
                   icon : "error",
                   buttons: {
                       confirm: {
                           className : 'btn btn-danger',
                           text : '确定',
                       }
                   },
               });
           } else{
               swal("提示", res.msg, {
                   icon : "success",
                   buttons: {
                       confirm: {
                           className : 'btn btn-success',
                           text : '确定',
                       }
                   }
               }).then(function () {
                   if(res.url) {
                       window.location.replace(res.url);
                   }else{
                       window.location.replace("{:url('Index/index')}");
                   }
               });
           }
           lock = false;
       }, 'json');
   });
});
</script>
{/block}